<template>
  <!-- prefixIcon="search" -->
  <uni-easyinput suffixIcon="search" v-model="searchValue" placeholder="搜索周边" @confirm="searchClick"
    @iconClick="searchClick" confirmType="search">
  </uni-easyinput>
  <div id="container"></div>
</template>

<script setup>
  import {
    onMounted,
    onUnmounted,
    reactive,
    ref,
  } from "vue";
  import {
    onLoad
  } from "@dcloudio/uni-app";
  import AMapLoader from "@amap/amap-jsapi-loader";

  let x = ref(null)
  let y = ref(null)
  let searchValue = ref(null)
  let map = reactive(null);
  let cityCode = ref('010') // 兴趣城市

  const searchClick = (v) => {
    initMap({
      longitude: x.value,
      latitude: y.value,
      search: true
    })
  }

  onLoad(() => {
    if (!uni.getLocation) {
      return uni.showModal({
        title: '提示',
        content: '请开启定位服务',
        success: function(res) {
          if (res.confirm) {
            // 引导用户到设置页开启定位服务
          }
        }
      });
    }
    uni.showLoading({
      title: '系统正在定位'
    });
    uni.getLocation({
      altitude: true, // 精确定位
      buttonPosition: 'RB', //定位按钮的停靠位置
      success: (res) => {
        uni.showToast({
          title: '定位成功',
        });

        // 经纬度：120.312000,31.493099
        console.log(res)
        x.value = res.longitude
        y.value = res.latitude
        let options = {
          longitude: res.longitude,
          latitude: res.latitude,
        }

        initMap(options);
        getLocation(res)
      },
      fail: () => {
        uni.hideLoading();
        uni.showToast({
          title: '定位失败',
        });
      }
    })
  })

  onUnmounted(() => {
    map.value?.destroy();
  });

  const initMap = (options) => {
    AMapLoader.load({
        key: "3047bf931923a319988f7347cd51ad72", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表
      })
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          pitch: 20, // 角度，有效范围 0 度- 83 度
          terrain: true,
          viewMode: "3D", // 是否为3D地图模式
          zoom: 15, // 初始化地图级别
          center: [options.longitude, options.latitude], // 初始化地图中心点位置
        });

        // 设置标记点位
        const marker = new AMap.Marker({
          position: [options.longitude, options.latitude], // 设置点位经纬度
          icon: new AMap.Icon({ // 添加 Icon 图标 URL
            image: '/static/star.png',
            size: new AMap.Size(22, 28), //图标所处区域大小
            imageSize: new AMap.Size(22, 28) //图标大小
          }),
        })

        map.add(marker) // 添加到地图

        if (options.search) {
          // 搜索位置
          AMap.plugin(["AMap.PlaceSearch"], function() {
            console.log(cityCode.value, 'cityCode')
            const placeSearch = new AMap.PlaceSearch({
              pageSize: 5, //单页显示结果条数
              pageIndex: 1, //页码
              city: cityCode.value, //兴趣点城市
              citylimit: true, //是否强制限制在设置的城市内搜索
              map: map, //展现结果的地图实例
              // panel: "my-panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>，结果列表将在此容器中进行展示。
              autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
            });
            placeSearch.search(searchValue.value); //使用插件搜索关键字并查看结果
          });
        }
      })
      .catch((e) => {
        console.log(e);
      });
  }

  const getLocation = (res) => {
    const latitude = res.latitude;
    const longitude = res.longitude;
    const amapKey = '3047bf931923a319988f7347cd51ad72';
    const url = `https://restapi.amap.com/v3/geocode/regeo?key=${amapKey}&location=${longitude},${latitude}`;
    uni.request({
      url: url,
      success: (response) => {
        console.log('response.data', response.data);
        if (response.data && response.data.infocode) {
          cityCode.value = response.data.infocode
        }
      },
      fail: (error) => {
        console.error('获取城市失败：', error);
      }
    })
  }
</script>
<style lang="scss" scoped>
  #container {
    width: 100%;
    height: 800px;
  }
</style>
